﻿/// <reference path="DataBrowser.aspx" />
var map;
var kmlLayer;
var mapLoaded = false;
var kmlQuery;

function pageLoad() {
    // Accordion
    $("#dataViewAccordion").accordion({ active: 1, collapsible: true, autoHeight: true, change: dataViewAccordionChanged, animated: false });
    $("#mapViewAccordion").accordion({ active: 1, collapsible: true, autoHeight: true, change: mapViewAccordionChanged, animated: false });

    // Tabs
    $('#tabs').tabs({ select: tabsSelected });
    
    //Section 508 - Added parameter modal to set focus 
    $("#filterDialog").dialog({ width: 530, autoOpen: false, modal: true, show: 'slide' });

    $("#copyDataCodeButton").click(copyDataCode);
    $("#copyMapCodeButton").click(copyMapCode);

    $.clipboardReady(clipboardReady, { swfpath: "js/jquery.clipboard.swf" });

    $('#tabs').css({ visibility: "visible" });
    $("#filterDialog").css({ visibility: "visible" });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(scriptManagerRequestCompleted);
    map = new VEMap('myMap');
    map.LoadMap();
    map.Resize(862, 450);
    loadKml();
}

function clipboardReady() {
    $("#copyDataCodeButton").css({ visibility: "visible", cursor: "pointer" });
    $("#copyMapCodeButton").css({ visibility: "visible", cursor: "pointer" });
}

function dataViewAccordionChanged(event, ui) {
    var newHeader = ui.newHeader.attr("id");
    var oldHeader = ui.oldHeader.attr("id");

    if (newHeader == undefined && oldHeader == "dataViewSampleCode") {
        $("#dataViewAccordion").accordion("activate", 1);
    }

    if (newHeader == undefined && oldHeader == "dataViewResults") {
        $("#dataViewAccordion").accordion("activate", 0);
    }
}

function mapViewAccordionChanged(event, ui) {
    var newHeader = ui.newHeader.attr("id");
    var oldHeader = ui.oldHeader.attr("id");

    if (newHeader == undefined && oldHeader == "mapViewSampleCode") {
        $("#mapViewAccordion").accordion("activate", 1);
    }

    if (newHeader == undefined && oldHeader == "mapViewResults") {
        $("#mapViewAccordion").accordion("activate", 0);
    }
}

function tabsSelected(event, ui) {
    switch (ui.index) {
        case 0:
            $("#dataViewAccordion").accordion('option', 'collapsible', false);
            $("#dataViewAccordion").accordion("activate", 1);
            $("#dataViewAccordion").accordion('option', 'collapsible', true);
            break;
        case 1:
            $("#mapViewAccordion").accordion('option', 'collapsible', false);
            $("#mapViewAccordion").accordion("activate", 1);
            $("#mapViewAccordion").accordion('option', 'collapsible', true);
            break;
        default:
            break;
    }
}

function scriptManagerRequestCompleted(sender, args) {
    var errorPanel = $get(errorPanelClientID);
    if (errorPanel != null) {
        $("#tabs").hide();
    }
    else {
        $("#tabs").show();
    }
}

function loadKml() {
    map.Clear();

    kmlLayer = new VEShapeLayer();

    // The following variables are populated in line 6
    // of DataBrowser.aspx.
    //var uriLabelClientID = "<%= uriLabel.ClientID %>";
    //var queryBoxClientID = "<%= queryBox.ClientID %>";

    //alert($get(uriLabelClientID).innerHTML);
    kmlQuery = $get(uriLabelClientID).innerHTML + "?";



    if ($get(queryBoxClientID).value != "(additional $filter parameters...)" && $get(queryBoxClientID).value != "") {
        kmlQuery += "$filter=" + $get(queryBoxClientID).value;
    }

    kmlQuery += "&format=kml";

    // Limit the query to 50 items
    var veLayerSpec = new VEShapeSourceSpecification(
                        VEDataType.ImportXML,
                        kmlQuery + "&$top=50",
                        kmlLayer);

    map.ImportShapeLayerData(veLayerSpec, kmlLoaded, true);
}

function kmlLoaded(veShapeLayer) {
    var shapeCount = veShapeLayer.GetShapeCount();

    if (shapeCount > 0) {
        setCustomPushpins(veShapeLayer);
        hidePolyIcon(veShapeLayer);
        $get("mapFullQueryUrlHyperlink").innerHTML = kmlQuery;
        $("#mapFullQueryUrlHyperlink").attr({ href: kmlQuery });
        $("#mapFullQueryPanel").show();
        $("#mapNoResultsDiv").hide();
    }
    else {
        $("#mapFullQueryPanel").hide();
        $("#mapNoResultsDiv").show();
    }
}

function hidePolyIcon(layer) {
    var shapeCount = layer.GetShapeCount();
    for (var i = 0; i < shapeCount; i++) {
        var shape = layer.GetShapeByIndex(i);
        if (shape.GetType() == VEShapeType.Polygon) {
            shape.HideIcon();
        }
    }
}

function setCustomPushpins(layer) {
    var numShapes = layer.GetShapeCount();
    var shape;
    for (var i = 0; i < numShapes; ++i) {
        shape = layer.GetShapeByIndex(i);
        //Section 508 - Added alternate and descriptive text for image
        shape.SetCustomIcon("<img src='images/pushpin.png' alt='image showing the location of the selected place' longdesc='desc/longdesc.txt'/>");
    }

    // Enable clustering with a custom icon...
    var customIcon = new VECustomIconSpecification();
    customIcon.Image = "images/pushpin-expand.png";
    var options = new VEClusteringOptions();
    options.Icon = customIcon;
    layer.SetClusteringConfiguration(VEClusteringType.Grid, options);
}

function runButtonClick() {
    loadKml();
}

function copyDataCode() {
    htmlContent = $get(dataSampleCodeDivClientID).innerHTML;
    textContent = stripHTML(htmlContent);
    $.clipboard(textContent);
}

function copyMapCode() {
    htmlContent = $get(mapSampleCodeDivClientID).innerHTML;
    textContent = stripHTML(htmlContent);
    $.clipboard(textContent);
}

function stripHTML(s) {

    //  Replace closing <PRE> tags with CR/LF pair
    s = s.replace(/<\/PRE>/g, "\r\n");

    //  Replace non-breaking space with CR/LF pair
    s = s.replace(/&nbsp;/g, "\r\n");

    //  Remove double-spaced lines
    s = s.replace(/\r\n\r\n/g, "\r\n");

    //  Remove all remaining HTML tags
    var re = /<\S[^><]*>/g;
    s = s.replace(re, "");

    s = s.replace(/&amp;/g, "&");
    s = s.replace(/&lt;/g, "<");
    s = s.replace(/&gt;/g, ">");
    s = s.replace(/&nbsp;&nbsp;&nbsp;/g, "\t");
    s = s.replace(/<br \/>/g, "\r\n");

    return s;
}